<% @page_title = @location.ui_name %>

<%== part(
  "components/page_header",
  title: "Region Detail",
  back: "/private-location",
  breadcrumbs: [%w[AWS\ Regions /private-location], [@location.ui_name, @location.path]]
) %>

<div class="grid gap-6">
  <!-- Detail Card -->
  <form action="<%= (@project.path + @location.path) %>" method="POST">
    <%== csrf_tag(@project.path + @location.path) %>

    <%== part(
      "components/kv_data_card",
      data: [
        ["ID", @location.ubid],
        [
          "UI Name",
          part(
            "components/form/text",
            name: "name",
            value: @location.display_name,
            button_title: "Save",
            attributes: {
              required: true
            }
          ),
          { escape: false }
        ],
        ["API Name", @location.display_name],
        ["AWS Region", @location.name]
      ]
    ) %>
  </form>
  <!-- Danger Zone -->
  <% if has_permission?("Location:delete", @project.ubid) %>
    <div>
      <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
        <div class="min-w-0 flex-1">
          <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
            Danger Zone
          </h3>
        </div>
      </div>
      <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
        <!-- Delete Card -->
        <div class="px-4 py-5 sm:p-6">
          <div class="sm:flex sm:items-center sm:justify-between">
            <div>
              <h3 class="text-base font-semibold leading-6 text-gray-900">Delete region</h3>
              <div class="mt-2 text-sm text-gray-500">
                <p>This action will permanently delete this region. Deleted data cannot be recovered. Use it carefully.</p>
              </div>
            </div>
            <div id="region-delete-<%=@location.ubid%>" class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
              <%== part("components/delete_button", confirmation: @location.ui_name, redirect: "#{@project.path}/private-location") %>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>
